<template>
	<view class="wrap">
		<u-navbar :is-fixed="true" title="驾校报名" back-icon-name="arrow-leftward">
			<view class="slot-wrap greenbg heigh150">
				<view class="u-navbar-centent-slot">
					<!-- <text>购卡中心</text> -->
				</view>
			</view>
		</u-navbar>
		<view class="banners">
			<u-swiper :list="list" height="200"></u-swiper>
		</view>
		<view class="cityview">
			<view class="citylocal whitetxt">
				<text>当前位置：</text>
				<text>{{ localaddress }}</text>
			</view>
			<view class="cityreload whitetxt" @click="selectcity()"><text>切换地区</text></view>
		</view>
		<view class="school">
			<view class="u-tabs-box border-bottom">
				<u-tabs-swiper activeColor="#0DA0FF" height="60" ref="tabs" :list="listnav" :current="current"
					@change="change" :is-scroll="false" swiperWidth="750"></u-tabs-swiper>
			</view>
			<swiper class="swiper-box" :current="swiperCurrent" @animationfinish="animationfinish">
				<swiper-item class="swiper-item">
					<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="reachBottom">
						<view class="page-box">
							<view class="schview">
								<view class="schviewtxtleft"><text>推荐驾校</text></view>
								<!-- <view class="schviewtxtright"><text>联系</text></view> -->
							</view>
							<view class="shclis" v-for="(item, index) in jiaxiaojson" :key="index">
								<view class="shclist">
									<view class="shcimg">
										<image :src="item.img"></image>
										<image class="tj" src="https://tongyongjiakao-1307163845.cos.ap-shanghai.myqcloud.com/used_img/tj.png"></image>
									</view>
									<view class="shctxt">
										<view class="shctxtcon">
											<view class="shctxtconleft">
												<text>{{ item.jname }}</text>
											</view>
											<view class="shctxtconright textcenter">
												<text class="font-20">{{ item.city }}</text>
											</view>
										</view>
										<view class="shctxtcon">
											<view class="shctxtconaddress">
												<image src="https://tongyongjiakao-1307163845.cos.ap-shanghai.myqcloud.com/used_img/adress.png"></image>
												<text class="font-20">{{ item.address }}</text>
											</view>
										</view>
										<view class="shctxtcon">
											<view class="shctxtconmoney">
												<text class="redtext font-20">￥{{ item.price }}</text>
											</view>
											
											<view class="shctxtcontel">
												<view class="shctxtcontelicon" @click="telpon(item)">
													<image src="https://tongyongjiakao-1307163845.cos.ap-shanghai.myqcloud.com/used_img/tel.png"></image>
												</view>
												<view class="shctxtcontelicon" @click="copy(item.wx)">
													<image src="https://tongyongjiakao-1307163845.cos.ap-shanghai.myqcloud.com/used_img/wxlx.png"></image>
												</view>
											</view>
										</view>
									</view>
								</view>
								<view class="border-bottoms"></view>
							</view>

							<!-- <u-loadmore :status="loadStatus[0]" bgColor="#f2f2f2"></u-loadmore> -->
						</view>
					</scroll-view>
				</swiper-item>
				<swiper-item class="swiper-item">
					<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="reachBottom">
						<view class="page-box">
							<view class="schview">
								<view class="schviewtxtleft"><text>教练名</text></view>
								<view class="schviewtxtright"><text>联系方式</text></view>
							</view>
							<view class="shclis" v-for="(item, index) in jiaolianjson" :key="index">
								<view class="shclist">
									<view class="shcimg">
										<image :src="item.img"></image>
									</view>
									<view class="shctxt">
										<view class="shctxtcon">
											<view class="shctxtconleft">
												<text>{{ item.jname }}</text>
											</view>
											<view class="shctxtconright textcenter">
												<text class="font-20">{{ item.city }}</text>
											</view>
										</view>
										<view class="shctxtconaddress">
											<text class="font-20">驾校名称：{{ item.jxname }}</text>
										</view>
										<view class="shctxtcon">
											<view class="shctxtconmoney">
												<text class="redtext font-24">￥{{ item.price }}</text>
											</view>
											
											<view class="shctxtcontel">
												<view class="shctxtcontelicon" @click="telpon(item)">
													<image src="../../static/school/tel.png"></image>
												</view>
												<view class="shctxtcontelicon" @click="copy(item.wx)">
													<image src="../../static/school/wechat.png"></image>
												</view>
											</view>
										</view>
									</view>
								</view>
								<view class="border-bottoms"></view>
							</view>

							<!-- <u-loadmore :status="loadStatus[1]" bgColor="#f2f2f2"></u-loadmore> -->
						</view>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
		<city-select v-model="cityshow" @city-change="cityChange"></city-select>
	</view>
</template>

<script>
	let QQMapWX = require('../../static/qqmap-wx-jssdk.min.js');
	let qqmap;
	//接口
	import {
		jiaolianlist_api, //教练接口
		jiaxiaolist_api, //驾校接口
		guanggao_api //广告接口
	} from '@/api/index';

	import citySelect from './u-city-select.vue';

	export default {
		components: {
			citySelect
		},
		data() {
			return {
				list: ["https://cdn.uviewui.com/uview/swiper/1.jpg", "https://cdn.uviewui.com/uview/swiper/2.jpg",
					"https://cdn.uviewui.com/uview/swiper/3.jpg"
				],
				localaddress: '乌鲁木齐市',
				province: '',
				city: '',
				area: '',
				latitude: '',
				longitude: '',
				jiaxiaojson: [], //驾校列表
				jiaolianjson: [], //教练列表

				//tabs
				listnav: [{
						name: '驾校'
					},
					{
						name: '教练'
					}
				],
				current: 0,
				swiperCurrent: 0,
				tabsHeight: 0,
				dx: 0,
				loadStatus: ['loadmore', 'loadmore', 'loadmore', 'loadmore'],
				cityshow: false, //显示地区,
				// schoolList: [{
				// 	img: 'https://tongyongjiakao-1307163845.cos.ap-shanghai.myqcloud.com/used_img/hc.png',
				// 	jname: '星光驾校',
				// 	city: '伊宁市',
				// 	price: '3888',
				// 	address: '伊宁市XX街458号',
				// 	tel: '18339311883',
				// 	wx: '111111'
				// },{
				// 	img: 'https://tongyongjiakao-1307163845.cos.ap-shanghai.myqcloud.com/used_img/hc.png',
				// 	jname: '星光驾校',
				// 	city: '伊宁市',
				// 	price: '3888',
				// 	address: '伊宁市XX街458号',
				// 	tel: '18339311883',
				// 	wx: '111111'
				// },{
				// 	img: 'https://tongyongjiakao-1307163845.cos.ap-shanghai.myqcloud.com/used_img/hc.png',
				// 	jname: '星光驾校',
				// 	city: '伊宁市',
				// 	price: '3888',
				// 	address: '伊宁市XX街458号',
				// 	tel: '18339311883',
				// 	wx: '111111'
				// },]
			};
		},
		onLoad(options) {
			var that = this;
			that.adlists();
			that.jiaxiao();


			uni.getStorage({
				key: 'tanchukuang',
				success: function(res) {

				},
				fail: function() {
					uni.showModal({
						title: '权限说明',
						content: '1.位置权限:更好的享受学车体验，获取周边的驾校和教练;\n2.电话权限：用户方便联系找驾校，找教练一键打电话功能。',
						confirmText: '知道了',
						showCancel: false,
						success: function(res) {
							if (res.confirm) {
								try {
									uni.setStorageSync('tanchukuang', 'hello');

								} catch (e) {
									// error
								}
							} else if (res.cancel) {
								plus.runtime.quit();
							}
						}
					});
				}
			})


			//定位
			//that.location();
			//演示
			if (options.cuunt == '1') {
				that.current = 1;
				that.swiperCurrent = 1;
			}
			qqmap = new QQMapWX({
				// key: ‘PATBZ-EZURU-G***FU-GCBRO-LWFXC’
				key: 'CMRBZ-QOCKQ-MTK5N-GWRR4-BWLLK-ABBFT'
				//CMRBZ-QOCKQ-MTK5N-GWRR4-BWLLK-ABBFT
				//CMRBZ-QOCKQ-MTK5N-GWRR4-BWLLK-ABBFT
			});
			setTimeout(function() {
				that.init();
			}, 200)


		},

		onShow() {
			var that = this;
			qqmap = new QQMapWX({
				// key: ‘PATBZ-EZURU-G***FU-GCBRO-LWFXC’
				key: 'CMRBZ-QOCKQ-MTK5N-GWRR4-BWLLK-ABBFT'
				//CMRBZ-QOCKQ-MTK5N-GWRR4-BWLLK-ABBFT
				//CMRBZ-QOCKQ-MTK5N-GWRR4-BWLLK-ABBFT
			});
			setTimeout(function() {
				that.init();
			}, 200)
		},
		methods: {
			adlists() {
				var that = this;
				that.https({
					url: guanggao_api,
					method: 'POST',
					header: {
						'content-type': 'application/json'
					},
					data: {
						type: 1
					},
					success: res => {
						// console.log(res);
						//app缓存到本地
						//小程序读取在线
						var imgjson = [];
						var imgurl = res.images;
						for (var i = 0; i < imgurl.length; i++) {
							var imgstr = {
								image: imgurl[i],
								title: 'tongyongjiakao'
							}
							imgjson.push(imgstr);
						}
						// console.log("res.images",imgjson);
						that.list = imgjson;
					},
					fail: err => {
						console.log(err);
						uni.showModal({
							title: '错误提示',
							content: err,
							success: function(res) {
								if (res.confirm) {
									console.log('用户点击确定');
								} else if (res.cancel) {
									console.log('用户点击取消');
								}
							}
						});
					}
				});
			},
			location() {},
			selectcity() {
				console.log('sssseee')
				var that = this;
				that.cityshow = true;
			},
			cityChange(e) {
				console.log(e)
				// this.localaddress = e.province.label + '-' + e.city.label + '-' + e.area.label;
				this.localaddress = e.city.label;
			},
			jiaxiao() {
				var that = this;
				that.https({
					url: jiaxiaolist_api,
					method: 'POST',
					header: {
						'content-type': 'application/json'
					},
					data: {},
					success: res => {
						console.log(res);
						that.jiaxiaojson = res.jiaxiao_list;
					},
					fail: err => {
						console.log(err);
					},
					complete: e => {
						that.jiaolian();
					}
				});
			},
			jiaolian() {
				var that = this;
				that.https({
					url: jiaolianlist_api,
					method: 'POST',
					header: {
						'content-type': 'application/json'
					},
					data: {},
					success: res => {
						console.log(res);
						that.jiaolianjson = res.jiaolian_list;
					},
					fail: err => {
						console.log(err);
					}
				});
			},
			telpon(arr) {
				var that = this;
				console.log('arr--=', arr);
				var phos = arr.tel;
				console.log(phos);
				uni.makePhoneCall({
					// 手机号
					phoneNumber: phos,
					// 成功回调
					success: res => {
						console.log('调用成功!');
					},
					// 失败回调
					fail: res => {
						console.log('调用失败!');
					}
				});
			},
			copy(value) {
				console.log("wxwxwxwx")
				//提示模板
				uni.showModal({
					content: '微信号：' + value, //模板中提示的内容
					confirmText: '复制微信号',
					success: () => {
						//点击复制内容的后调函数
						//uni.setClipboardData方法就是讲内容复制到粘贴板
						uni.setClipboardData({
							data: value, //要被复制的内容
							success: () => {
								//复制成功的回调函数
								uni.showToast({
									//提示
									title: '复制成功'
								});
							}
						});
					}
				});
			},
			reachBottom() {
				// 此tab为空数据
				console.log('jiazai');
				// if(this.current != 2) {
				// 	this.loadStatus.splice(this.current,1,"loading")
				// 	setTimeout(() => {
				// 		this.getOrderList(this.current);
				// 	}, 1200);
				// }
			},
			// tab栏切换
			change(index) {
				this.swiperCurrent = index;
				//this.getOrderList(index);
			},
			transition({
				detail: {
					dx
				}
			}) {
				this.$refs.tabs.setDx(dx);
			},
			animationfinish({
				detail: {
					current
				}
			}) {
				this.$refs.tabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.current = current;
			},

			init() {
				var that = this;

				uni.getLocation({
					type: 'wgs84',
					geocode: true,
					success: res => {
						console.log('获取经纬度成功');
						that.latitude = res.latitude;
						that.longitude = res.longitude;
						console.log(res);

						// 解析地址
						// qqmap.reverseGeocoder({
						//                location: {
						//                     latitude: res.latitude,
						//                     longitude: res.longitude
						//                },
						//                get_poi: 1,
						//                poi_options: 'policy=2;radius=3000;page_size=20;page_index=1',
						//                success: function(res) {
						//                     console.log(res);
						//                     // that.setData({
						//                     //      addressList: res.result.pois
						//                     // })
						//                },
						//                fail: function(res) {
						//                     console.log(res);
						//                },
						//                complete: function(res) {
						//                     console.log(res);
						//                }
						//           });


						qqmap.reverseGeocoder({
							location: {
								latitude: res.latitude,
								longitude: res.longitude
							},
							success: function(rescity) {
								console.log(rescity);
								that.$nextTick(function() {
									that.province = rescity.result.ad_info.province; // 省

									that.city = rescity.result.ad_info.city; // 市
									that.localaddress = rescity.result.ad_info.city;
									that.area = rescity.result.ad_info.district; // 区
									//this.address = [this.province,this.city,this.area]
								});

							},
							fail: function(resm) {
								uni.showToast({
									title: '定位失败',
									duration: 2000,
									icon: 'none'
								});
								console.log(resm);
							},
							complete: function(res) {}
						});

					},
					fail: err => {
						console.log('获取经纬度失败');
						console.log(err);
						uni.getSystemInfo({
							success(res) {

								// #ifdef MP-WEIXIN
								console.log('获取经纬度失败-----', res);
								//#endif
								//#ifdef APP-PLUS
								if (res.platform == 'ios') {
									//IOS
									var cllocationManger = plus.ios.import('CLLocationManager');
									var enable = cllocationManger.locationServicesEnabled();
									var status = cllocationManger.authorizationStatus();
									plus.ios.deleteObject(cllocationManger);
									if (enable && status == 2) {
										uni.showModal({
											title: '提示',
											content: '请打开定位服务功能',
											success(com) {
												if (com.confirm == true) {
													plus.runtime.openURL('app-settings://');
												}
											}
										});
									} else {
										uni.showModal({
											title: '提示',
											content: '未定位到当前城市，请选择城市',
											showCancel: false,
											success(com) {
												that.showdAddress = true;
											}
										});
									}
								} else if (res.platform == 'android') {
									//安卓
									var context = plus.android.importClass('android.content.Context');
									var locationManager = plus.android.importClass(
										'android.location.LocationManager');
									var main = plus.android.runtimeMainActivity();
									var mainSvr = main.getSystemService(context.LOCATION_SERVICE);
									if (!mainSvr.isProviderEnabled(locationManager.GPS_PROVIDER)) {
										uni.showModal({
											title: '提示',
											content: '请打开定位服务功能',
											showCancel: false, // 不显示取消按钮
											success(com) {
												if (com.confirm == true) {
													if (!mainSvr.isProviderEnabled(
															locationManager.GPS_PROVIDER)) {
														var Intent = plus.android.importClass(
															'android.content.Intent');
														var Settings = plus.android
															.importClass(
																'android.provider.Settings');
														var intent = new Intent(Settings
															.ACTION_LOCATION_SOURCE_SETTINGS
														);
														main.startActivity(
															intent); // 打开系统设置GPS服务页面
													} else {
														console.log('GPS功能已开启');
													}
												}
											}
										});
									} else {
										uni.showModal({
											title: '提示',
											content: '未定位到当前城市，请选择城市',
											showCancel: false,
											success() {
												that.showdAddress = true;
											}
										});
									}
								}
								//#endif
							}
						});
					},
					complete: () => {}
				});
			}
		}
	};
</script>

<style scoped lang="scss">
	.schview {
		width: 700rpx;
		display: block;
		display: flex;
		flex-direction: row;
		align-items: center;
		margin: 0 auto;
		justify-content: space-between;
	}

	.shclis {
		/* padding: 30rpx; */
		box-sizing: border-box;
		width: 750rpx;
		/* height: 130rpx; */
		/* background: #fafafa; */
		margin-top: 5rpx;
	}

	.shclist {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		width: 700rpx;
		height: 208rpx;
		/* background: #fafafa; */
		margin: 0 auto;
	}

	.shcimg {
		width: 150rpx;
		height: 120rpx;
		display: inline-block;
		position: relative;
		.tj{
			width: 53rpx;
			height: 34rpx;
			position: absolute;
			top:0;
			left: 15rpx;
		}
	}

	.shcimg image {
		width: 150rpx;
		height: 120rpx;
	}

	.shctxt {
		width: 550rpx;
		height: 120rpx;
		display: inline-block;
	}

	.shctxtcon {
		width: 500rpx;
		height: 40rpx;
		display: block;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		margin: 0 auto;
		margin-bottom: 5rpx;
	}

	.shctxtconmoney {
		width: 100rpx;
		height: 60rpx;
		line-height: 60rpx;
		display: inline-block;
		
	}

	.shctxtconaddress {
		width: 280rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		display: inline-block;
		font-size: 24rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #666666;
		display: flex;
    
	}
	.shctxtconaddress image{
		width: 24rpx;
		height: 24rpx;
		margin-right: 10rpx;
	}

	.shctxtcontel {
		width: 120rpx;
		height: 60rpx;
		line-height: 60rpx;
		display: inline-block;
	}

	.shctxtcontelicon {
		width: 60rpx;
		height: 60rpx;
		display: inline-block;
	}

	.shctxtcontelicon image {
		width: 40rpx;
		height: 40rpx;
		padding: 10rpx;
		margin-top: -20rpx;
	}

	.shctxtconleft {
		width: 380rpx;
		height: 60rpx;
		line-height: 60rpx;
		display: inline-block;
		font-size: 30rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #2B2B2B;
	}

	.shctxtconright {
		width: 120rpx;
		height: 60rpx;
		line-height: 60rpx;
		display: inline-block;
		font-size: 24rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #AAAAAA;
	}

	.schviewtxtleft {
		width: 480rpx;
		height: 80rpx;
		padding-left: 20rpx;
		line-height: 80rpx;
		font-size: 30rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #2B2B2B;
	}

	.kz .schviewtxtleft {
		line-height: 90rpx;
	}

	.uy .schviewtxtleft {
		line-height: 90rpx;
	}

	.schviewtxtright {
		width: 200rpx;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
	}

	.kz .schviewtxtright {
		line-height: 90rpx;
	}

	.uy .schviewtxtright {
		line-height: 90rpx;
	}

	.u-tabs-box {
		width: 700rpx;
		height: 70rpx;
		margin: 20rpx auto 0 auto;
	}

	.border-bottom {
		border-bottom: 1rpx solid #efefef;
	}

	.border-bottoms {
		margin: 5rpx auto;
		width: 691rpx;
		height: 1rpx;
		opacity: 1;
		border-bottom: 1rpx solid #F2F4F5;
	}

	.banners {
		width: 750rpx;
		height: 200rpx;
		margin: 20rpx 0;
	}

	.school {
		width: 750rpx;
		height: 100%;
		margin: 0 auto;
		display: block;
	}

	.cityview {
		width: 690rpx;
		height: 56rpx;
		line-height: 56rpx;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		margin: 0 auto;
		background: #F6FBFF;
		border-radius: 87rpx 87rpx 87rpx 87rpx;
		opacity: 1;
	}

	.citylocal {
		display: inline-block;
		width: 490rpx;
		padding-left: 10rpx;
		font-size: 24rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #3D3D3D;
		line-height: 28rpx;
	}

	.cityreload {
		width: 190rpx;
		display: inline-block;
		text-align: right;
		padding-right: 10rpx;
		font-weight: 400;
		color: #0DA0FF;
		line-height: 28rpx;

	}

	.wrap {
		display: flex;
		flex-direction: column;
		/* height: calc(100vh - var(--window-top)); */
		height: calc(100vh - 44px);
		width: 100%;
	}

	.swiper-box {
		flex: 1;
		height: 100%;
	}

	.swiper-item {
		height: 100%;
	}

	.page-box {
		width: 750rpx;
		height: 100%;
		margin: 0;
		padding: 0;
	}
</style>
